import React from 'react';
import { createForm } from 'rc-form';
import { Button, InputItem, WingBlank, WhiteSpace,Toast,List,Picker,TextareaItem } from 'antd-mobile';
import { district } from 'antd-mobile-demo-data';
import 'antd-mobile/dist/antd-mobile.css';
import request from '../../../../utils/request';
import { hashHistory} from 'react-router';
let userMsg = {};
let countryList = [];
let provinceList= [];
let cityList = [];
let districtList = [];
const status = [
    [
        {
            label: '开启',
            value: 1,
        },
        {
            label: '关闭',
            value: 0,
        },
    ],
];

class MyMenu extends React.Component {

    state = {
        data: [],
        cols: 1,
        asyncValue: [],
        status: '',
        hasError: false,
        value: '',
    };

    constructor(props) {
        super(props);
        this.state = {
            dpValue: null,
        };
    }
    componentDidMount() {
        this.props.changeTitle('供应商申请');
        //获取地区信息
        request('RegionService','getRegionList', {
            method: 'POST',
            body: {},
        }).then(function (value) {
            const { regionList } = value.data.resultData;
            regionList.forEach((i) => {
                if (i.regionType === 0){
                    countryList.push(i);
                }else if (i.regionType === 1) {
                    provinceList.push(i);
                }else if (i.regionType === 2){
                    cityList.push(i);
                }else if (i.regionType === 3){
                    districtList.push(i)
                }
            })
        });
    }

    componentWillMount(){
        userMsg = this.props.location.state

    }

    onClick = () => {
        setTimeout(() => {
            this.setState({
                data: provinceList,
            });
        }, 120);
    };

    onPickerChange = (val) => {
        let colNum = 1;
        const d = [...this.state.data];
        const asyncValue = [...val];
        d.forEach((i) => {
            if (i.value === val[0]) {
                colNum = 2;
                if (!i.children) {
                    let childrenList = [];
                    cityList.forEach((m) => {
                        if (m.parentId === i.value){
                            childrenList.push(m);
                        }
                    });
                    i.children = childrenList;
                    asyncValue.push(i.children.value);
                }else {
                    i.children.forEach((k) => {
                        if (val[1] === k.value){
                            let childrenList = [];
                            districtList.forEach((n) => {
                                if (n.parentId === k.value){
                                    childrenList.push(n);
                                }
                            })
                            k.children = childrenList;
                            asyncValue.push(k.children.value);
                        }
                    });
                    colNum = 3;
                }
            }
        });
        this.setState({
            data: d,
            cols: colNum,
            asyncValue,
        });
    };

    onErrorClick = () => {
        if (this.state.hasError) {
            Toast.info('Please enter 11 digits');
        }
    }
    onChange = (value) => {
        if (value.replace(/\s/g, '').length < 11) {
            this.setState({
                hasError: true,
            });
        } else {
            this.setState({
                hasError: false,
            });
        }
        this.setState({
            value,
        });
    }

    //提交申请
    submit = () => {
        let fieldValue = this.props.form.getFieldsValue();
        fieldValue = {...fieldValue,
            mobile:this.state.value === undefined ? '' : this.state.value,
            status:this.state.status === undefined ? '' : this.state.status[0],
            address:fieldValue.address === undefined ? '' : fieldValue.address,
            addr:this.state.asyncValue === undefined ? '' : this.state.asyncValue,
            userId:userMsg.user_id,
            taskType:1};
        // fieldValue.mobile = this.state.value === undefined ? '' : this.state.value;
        // fieldValue.status = this.state.status === undefined ? '' : this.state.status[0];
        // fieldValue.address = fieldValue.address === undefined ? '' : fieldValue.address;
        // fieldValue.addr = this.state.asyncValue === undefined ? '' : this.state.asyncValue;
        // fieldValue.userId = userMsg.user_id;
        // fieldValue.taskType = 1;
        request('UserApplyService','supplierApply', {
            method: 'POST',
            body: fieldValue
        }).then(function (value) {
            if (value.data.result === 0){
                hashHistory.push({
                    pathname: '/',
                    state: userMsg,
                })
                Toast.info("申请成功，等待后台审核",1);
            }else if (value.data.result === 1){
                Toast.info("申请失败，请稍后再试",1);
            }
        });
    };

    render() {
        const { getFieldProps } = this.props.form;
        const { getFieldError } = this.props.form;

        return (
            <List className="my-list">
                <InputItem
                    {...getFieldProps('shopName')}
                    // style={{ textAlign: 'right',webkitAlignContent:'right' }}
                    type="text"
                    placeholder="请输入">
                    店铺名称
                </InputItem>
                <InputItem
                    {...getFieldProps('shopTitle',
                        {
                            initialValue: '',
                        })}
                    type="text"
                    placeholder="请输入">
                    店铺标题
                </InputItem>
                <InputItem
                    {...getFieldProps('shopKeyword',
                        {
                            initialValue: '',
                        })}
                    type="text"
                    placeholder="请输入">
                    店铺关键字
                </InputItem>
                <Picker
                    data={this.state.data}
                    cols={this.state.cols}
                    value={this.state.asyncValue}
                    onPickerChange={this.onPickerChange}
                    // onOk={v => console.log(v)}
                >
                    <List.Item arrow="horizontal" onClick={this.onClick}>地区</List.Item>
                </Picker>
                <TextareaItem
                    {...getFieldProps('address')}
                    rows={3}
                    placeholder="请输入详细地址"
                />
                <InputItem
                    {...getFieldProps('sellerEmail',
                        {
                            initialValue: '',
                            rules: [{
                                required: true, message: '请输入邮箱地址！',
                            }, {
                                type: 'email', message: '邮箱地址格式错误！',
                            }],
                        })}
                    error={!!getFieldError('sellerEmail')}
                    onErrorClick={() => {
                        Toast.fail(getFieldError('sellerEmail'), 1);
                    }}
                    placeholder="请输入">
                    店铺邮箱
                </InputItem>
                <InputItem
                    {...getFieldProps('kfqq',
                        {
                            initialValue: '',
                        })}
                    type="text"
                    placeholder="请输入">
                    客服QQ
                </InputItem>
                <InputItem
                    {...getFieldProps('kfww',
                        {
                            initialValue: '',
                        })}
                    type="text"
                    placeholder="请输入">
                    客服旺旺
                </InputItem>
                <InputItem
                    {...getFieldProps('kfTel',
                        {
                            initialValue: '',
                        })}
                    type="text"
                    placeholder="请输入">
                    公司电话
                </InputItem>
                <InputItem
                    {...getFieldProps('mobile')}
                    type="phone"
                    placeholder="请输入"
                    error={this.state.hasError}
                    onErrorClick={this.onErrorClick}
                    onChange={this.onChange}
                    value={this.state.value}
                >移动电话</InputItem>
                <InputItem
                    {...getFieldProps('notice',
                        {
                            initialValue: '',
                        })}
                    type="text"
                    placeholder="请输入">
                    店铺公告
                </InputItem>
                <Picker
                    data={status}
                    title="店铺状态"
                    cascade={false}
                    // extra={sex}
                    value={this.state.status}
                    onChange={v => this.setState({ status: v })}
                    onOk={v => this.setState({ status: v })} >
                    <List.Item arrow="horizontal">店铺状态</List.Item>
                </Picker>
                <WingBlank>
                    <WhiteSpace/>
                    <Button type="warning" size="large" onClick={this.submit}>提 交</Button><WhiteSpace/>
                </WingBlank>
            </List>
        );
    }
}

export default createForm()(MyMenu);
